<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <style>
    body {
      padding-top: 80px
    }

    #search-btn {
      margin-top: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-3 col-md-offset-3">
        <form class="form-horizontal">
          <input id="place-input" type="text" class="form-control" value="趵突泉" placeholder="请输入地址">
          <button type="button" id="search-btn" class="btn btn-success">
            查询
          </button>
        </form>

      </div>
      <div class="col-md-6">
        <div id="main" style="height:500px;"></div>
      </div>
    </div>
  </div>
  <script src='../jquery.min.js'></script>
  <script src='../echarts.min.js'></script>
  <script src='../china.js'></script>
  <script>
    // 画地图必须要经纬度数据
    // 百度地图的开发者秘钥
    var token = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
    var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
    var ePlaceInput = $('#place-input')
    var eSearchBtn = $('#search-btn')

    eSearchBtn.click(function () {
      var place = ePlaceInput.val()
      if (place) {
        $.getJSON(url + place + '&callback=?', function (res) {
          if (res.status === 0) {
            console.log(place, res.result)
          } else {
            alert('百度没有找到地址信息')
          }
        })
      }
    })
  </script>
</body>

</html>